<template>
  <div class="app-container" id="app">
    <!-- 顶部banner -->
    <div class="banner-box">
      <img src="@/assets/shoppingCarImg/fruit.jpg" alt>
    </div>
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <span>🏠</span>
      /
      <span>购物车</span>
      <span>{{ md }}</span>
    </div>
    <!-- 购物车主体 -->
    <div class="main">
      <div class="table">
        <!-- 头部 -->
        <div class="thead">
          <div class="tr">
            <div class="th">选中</div>
            <div class="th th-pic">图片</div>
            <div class="th">单价</div>
            <div class="th num-th">个数</div>
            <div class="th">小计</div>
            <div class="th">操作</div>
          </div>
        </div>
        <!-- 身体 -->
        <div class="tbody">
          <div class="tr" :class="{active:item.isChecked}" v-for="item in fruitList" :key="item.id">
            <div class="td">
              <input type="checkbox" v-model="item.isChecked">
            </div>
            <div class="td">
              <img :src="item.icon" alt>
            </div>
            <div class="td">{{item.price}}</div>
            <div class="td">
              <div class="my-input-number">
                <button class="decrease" :disabled="item.num <=1" @click="minus(item.id)">-</button>
                <span class="my-input__inner">{{item.num}}</span>
                <button class="increase" @click="tianjia(item.id)">+</button>
              </div>
            </div>
            <div class="td">{{item.num * item.price}}</div>
            <div class="td">
              <button @click="remove(item.id)">删除</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">
        <!-- 全选 -->
        <label class="check-all">
          <input type="checkbox" v-model="checkValue">
          全选
        </label>
        <div class="right-box">
          <!-- 所有商品总价 -->
          <span class="price-box">
            总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;
            <span class="price">{{totalPrice}}</span>
          </span>
          <!-- 结算按钮 -->
          <button class="pay">结算{{totalCount}}</button>
        </div>
      </div>
    </div>
    <!-- 空车 -->
    <div class="empty">🛒空空如也</div>
    <shoopingCartChildVue v-model="setValue"/>
  </div>
</template>

<script>
// import axios from 'axios'
import "@/css/shoppingCarImg.css";
import eventBus from "@/utils/eventBus";
import shoopingCartChildVue from '../component/shoopingCartChild.vue';
export default {
  components:{
    shoopingCartChildVue
  },
  data() {
    return {
      defaultArr: [
        {
          id: 1,
          icon: require("@/assets/shoppingCarImg/火龙果.png"),
          isChecked: true,
          num: 2,
          price: 6
        },
        {
          id: 2,
          icon: require("@/assets/shoppingCarImg/荔枝.png"),
          isChecked: false,
          num: 7,
          price: 20
        },
        {
          id: 3,
          icon: require("@/assets/shoppingCarImg/榴莲.png"),
          isChecked: false,
          num: 3,
          price: 40
        },
        {
          id: 4,
          icon: require("@/assets/shoppingCarImg/鸭梨.png"),
          isChecked: true,
          num: 10,
          price: 3
        },
        {
          id: 5,
          icon: require("@/assets/shoppingCarImg/樱桃.png"),
          isChecked: false,
          num: 20,
          price: 34
        }
      ],
      // 水果列表
        fruitList:[],
        md:'',
        setValue:'02'
    };
  },
  created(){
    eventBus.$on('buss',(msgs)=>{
      console.log(msgs);
      this.md = msgs
    })
  },
  mounted(){
    this.fruitList = JSON.parse(localStorage.getItem('list'))  || this.defaultArr
    
  },
  watch: {
    fruitList:{
      deep:true,
      handler(newValue){
       localStorage.setItem('list',JSON.stringify(newValue))
      }
    }
  },
  methods: {
    remove(id) {
      this.fruitList = this.fruitList.filter(item => id !== item.id);
    },

    minus(id) {
      const fruit = this.fruitList.find(item => item.id == id);
      fruit.num--;
    },
    tianjia(id) {
      const fruit = this.fruitList.find(item => item.id == id);
      fruit.num++;
    }
  },
  computed: {
    // 全选于反选
    checkValue:{
      get(){
        return this.fruitList.every(item => item.isChecked)
      },
      set(value){
         return this.fruitList.forEach(item => item.isChecked = value)
      }
    },
    // 总价
    totalPrice() {
      return this.fruitList.reduce((sum, item) => {
        if (item.isChecked) {
          return sum + item.num * item.price;
        } else {
          return sum;
        }
      }, 0);
    },
    // 总数量
    totalCount() {
      return this.fruitList.reduce((sum, item) => {
        if (item.isChecked) {
          return sum + item.num;
        } else {
          return sum;
        }
      }, 0);
    }
  }
};
</script>
<style scoped>
</style>

